<template>
    <div>
        <div>{{ routeName }}</div>
        <div>{{ query.id }}</div>
    </div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

export default defineComponent({
    setup() {
        const route = useRoute();
        const routeName = computed(() => route.name);
        const query = ref<null | { id: string }>(null);
        return {
            routeName,
            query,
        };
    },
});
</script>
